<template>
    <div class="backpmg"></div>
    <div class="elform">

        <el-form ref="loginform" :model="formModel" :rules="rules" size="large" @keyup.enter="login">
            <div class="title">
                <h1>HPX仓库管理系统</h1>
            </div>
            <el-form-item prop="UserName">
                <el-input placeholder="请填写用户名" v-model="formModel.UserName" prefix-icon="User">
                </el-input>
            </el-form-item>
            <el-form-item prop="UserPwd">
                <el-input placeholder="请填写密码" show-password v-model="formModel.UserPwd" type="password" prefix-icon="Lock">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login" color="#ff0d00">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import connect from '../untils/require'
import { ElNotification, ElLoading } from 'element-plus'

// 声明对象实例（用来解锁输入框）
let formModel = reactive({
    UserName: '',
    UserPwd: ''
})
// 定义一个规则（用来限制错误提交）
let rules = reactive({
    UserName: [
        { required: true, message: '用户名不能为空' },
        { min: 5, message: '用户名长度不能小于5' }
    ],
    UserPwd: [
        { required: true, message: '密码不能为空' },
        { min: 6, message: '密码长度不能小于6' }
    ]
})
// 声明一个响应式状态
let loginform = ref(null)
// 声明一个路由
let router = useRouter()

// 声明一个登录方法
function login() {
    loginform.value.validate((isValid) => {
        if (isValid) {
            const loading = ElLoading.service({
                lock: true,
                text: '加载中……',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            // 提交表单
            connect.post('Account/Login', formModel)
                .then(resp => {
                    loading.close()
                    if (resp.Code == '000') {
                        ElNotification({
                            title: '成功',
                            message: resp.Message,
                            type: 'success',
                        })
                        sessionStorage.setItem('Authorization', resp.Data.Token)
                        // 跳转首页
                        router.push({
                            path: '/workbench',
                            query: {
                                NickName: resp.Data.NickName
                            }

                        })
                    } else if (resp.Code == '999') {
                        ElNotification({
                            title: '错误',
                            message: '用户名或密码错误',
                            type: 'error',
                        })
                        formModel.UserPwd = ''
                    }
                })
                .catch(error => {
                    loading.close()
                })

        }
    })
}
</script>

<style scoped>
/* 大标题 */
.title {
    padding: 0;
    text-align: center;
    font-size: 20px;
    color: #ff0d00;
}

/* 背景图 */
.backpmg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/loginbackground.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
}
.elform{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;


}
/* 表单样式 */
.el-form {
    width: 300px;
    margin: 0 auto;
    
    padding: 50px 50px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.614);
    box-shadow: 0 5px 20px 5px #752f2b;
}

/* 每一行间距 */
.el-form-item {
    margin-top: 40px;
}

/* 按钮 */
.el-form-item .el-button {
    width: 100%;
}
</style>


